<template>
	<view>
		<!-- <view style="height: 20rpx;"></view> -->
		<view class="allComment">
			<view class="comment">
				<image src="../../../static/images/index/invite_bg1.png" mode="widthFix" class="img"></image>
				<tui-icon name="more-fill" class="more" size="16"></tui-icon>
				<view class="h1">
					餐厨话题
				</view>
				<view class="h2">
					2012-03-22 11:05
				</view>
				<view class="h3">
					太好吃了，强推菠萝和青梅。脆虾和芒果也是远好于市场水平的，香菇酱和肉燥酱简直是懒人福音。
				</view>
				<view class="h4">
					<view class="label">
						7天前
					</view>
					<view class="val">
						<tui-icon name="agree" class="icon"></tui-icon>点赞<tui-icon name="community" class="icon"></tui-icon>评论
					</view>
				</view>
				<view class="hr"></view>
			</view>
		</view>
		<view class="allComment">
			<view class="comment_title">精选评论</view>
			<view class="comment">
				<image src="../../../static/images/index/invite_bg1.png" mode="widthFix" class="img"></image>
				<tui-icon name="more-fill" class="more" size="16"></tui-icon>
				<view class="h1">
					餐厨话题
				</view>
				<view class="h2">
					2012-03-22 11:05
				</view>
				<view class="h3">
					太好吃了，强推菠萝和青梅。脆虾和芒果也是远好于市场水平的，香菇酱和肉燥酱简直是懒人福音。
				</view>
				<view class="h4">
					<view class="label">
						7天前
					</view>
					<view class="val">
						<tui-icon name="agree" class="icon"></tui-icon>点赞<tui-icon name="community" class="icon"></tui-icon>评论
					</view>
				</view>
				<view class="hr"></view>
			</view>
			<view class="comment">
				<image src="../../../static/images/index/invite_bg1.png" mode="widthFix" class="img"></image>
				<tui-icon name="more-fill" class="more" size="16"></tui-icon>
				<view class="h1">
					餐厨话题
				</view>
				<view class="h2">
					2012-03-22 11:05
				</view>
				<view class="h3">
					太好吃了，强推菠萝和青梅。脆虾和芒果也是远好于市场水平的，香菇酱和肉燥酱简直是懒人福音。
				</view>
				<view class="h4">
					<view class="label">
						7天前
					</view>
					<view class="val">
						<tui-icon name="agree" class="icon"></tui-icon>点赞<tui-icon name="community" class="icon"></tui-icon>评论
					</view>
				</view>
				<view class="hr"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: '',
		components: {

		},
		props: {

		},
		data() {
			return {

			};
		},
		computed: {

		},
		watch: {

		},
		onLoad() {

		},
		onShow() {

		},
		methods: {

		},
	};
</script>

<style lang="scss">
	.allComment {
		width: 100%;
		padding: 0 30rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	
		.comment_title {
			font-size: 30rpx;
			font-weight: bold;
			color: #111111;
			padding: 30rpx 10rpx 0;
		}
		.comment {
			width: 100%;
			position: relative;
			padding: 50rpx 0 0 95rpx;
			.img {
				width: 70rpx;
				height: 70rpx !important;
				border-radius: 50%;
				position: absolute;
				left: 0rpx;
				top: 40rpx;
			}
			.more {
				position: absolute;
				right: 0;
				top: 60rpx;
			}
			.h1 {
				font-size: 26rpx;
				font-weight: bold;
				color: #111111;
			}
			.h2 {
				margin-top: 8rpx;
				font-size: 22rpx;
				color: #AAAAAA;
			}
			.h3 {
				margin-top: 36rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;
			}
			.h4 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 60rpx;
				.label {
					font-size: 22rpx;
					color: #AAAAAA;
				}
				.val {
					font-size: 22rpx;
					color: #111111;
					.icon {
						font-size: 28rpx !important;
						vertical-align: middle;
						margin: -6rpx 10rpx 0 30rpx !important;
					}
				}
			}
			.hr {
				height: 1px;
				background: #EAE9E8;
				margin-top: 35rpx;
			}
			&:last-child {
				.hr {
					background: #fff;
				}
			}
		}
		.comment_more {
			width: 100%;
			line-height: 90rpx;
			text-align: center;
			font-size: 26rpx;
			color: #111111;
		}
	}
</style>
